<template>
  <create-menu :navMenu="menuData" mode="horizontal" class="el-menu-demo" background-color="#545c64" text-color="#fff"
    active-text-color="#ffd04b" :ellipsis="false"></create-menu>

</template>

<script lang="tsx" setup>
import { ref, onMounted } from "vue";
import { ElMenu, ElMessage } from 'element-plus'
import * as Request from "@/general/request";
import { menuStore } from '@/store/menu';
import { useAuthStore } from '@/store/user';
import { useRouter } from "vue-router";

const { MenuItem, SubMenu } = ElMenu

let menuData = ref([] as any[])

const store = useAuthStore();

const { user } = store;
const user_nick = user.nick
const router = useRouter();

const logoutCmd = (command: string) => {
  if (command === "logout") {
    localStorage.clear();
    store.setAuth(false)
    router.push({
      name: "login",
    });
  }
};


const user_menu = ref(
  {
    title: "用户",
    name: "user",
    childs: [{
      title: "登出",
      name: "logout",
      path: "/logout"
    }]
  }
)

const homemenuQuery = async () => {
  const response = await Request.GET("/background/home/menu_manage");
  if (response && response.data) {
    var data = response.data;
    if (data.success) {
      ElMessage.success(data.msg);
      menuData.value = data.data;
      menuData.value.push(user_menu.value)
    } else {
      ElMessage.error(data.msg);
    }
  }
};

onMounted(homemenuQuery);

const renderMenuItem = (menu) => {
  const store = menuStore();
  return (
    <MenuItem index={menu.path} onClick={() => (store.editableTabs(menu))}>
      <span>{menu.title}</span>
    </MenuItem>
  )
}

const renderSubMenu = (menu) => {
  const itemArr: any[] = []
  if (menu.childs && menu.childs.length > 0) {
    menu.childs.forEach((item) => itemArr.push(renderItem(item)))
  }

  return (
    <SubMenu index={menu.name}>
      {{
        default: itemArr,
        title: () => menu.title
      }}
    </SubMenu>
  )
}


const userMenu = (menu) => {
  return (
    <>
    <div style="flex-grow:1" />
      <SubMenu index="user_nick" style="float: right">
        {{
          title: () => <><el-icon><UserFilled /></el-icon> <span>{user_nick}</span></>,
          default: () => <MenuItem index="logout" onClick={() => (logoutCmd("logout"))}>
            <span>登出</span>
          </MenuItem>
        }}
      </SubMenu>
      </>
  )
}

const renderItem: any = (menu) => {

  if (menu.name === "user") {
    // debugger
    return userMenu(menu)
  }

  return menu.childs && menu.childs.length > 0
    ? renderSubMenu(menu)
    : renderMenuItem(menu)
}

const createMenu = (props) => {
  const { navMenu, ...rest } = props
  const menuTree = navMenu.map((item) => {
    return renderItem(item)
  })
  return <ElMenu {...rest}>{menuTree}</ElMenu>
}

</script>


<style scoped>
.demo-tabs>.el-tabs__content {
  /* padding: 32px; */
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-menu--horizontal {
  height: 45px;
}

</style>

<!-- <style>
.flex-grow {
  flex-grow: 5;
}
</style> -->